<template>
  <div class="meaasge">
    <div class="m-tip flex">
      <div class="flex">
        <p class="nav">消息中心</p>
        <p class="total">(共计{{ total }}条消息，其中有{{ noRead }}条未读)</p>
      </div>
      <el-button
        type="primary"
        plain
        icon="el-icon-circle-check"
        size="small"
        @click="handleReadAll"
        >全部已读</el-button
      >
    </div>
    <div class="m-main" v-if="List.length">
      <div
        class="mm-box"
        v-for="item in List"
        :key="item.id"
        @click="handleClick(item)"
      >
        <div class="flex">
          <div class="c">
            <p class="circle" v-if="!item.read"></p>
          </div>
          <p class="flex-auto">{{ item.title }}</p>
          <p class="date">{{ item.updateTime }}</p>
        </div>
        <!-- 资讯 -->
        <div class="mmb-con" v-if="item.type == 1">
          <p
            v-for="list in item.relData"
            :key="list.id"
            @click="handleZX(list)"
          >
            <span class="scircle"></span> {{ list.title }}
          </p>
        </div>
        <!-- 企业 -->
        <div class="mmb-con" v-if="item.type == 2">
          <p @click="gotoDetail(item)">{{ item.relEnterprise }}</p>
        </div>
        <!-- 产业 -->
        <div class="mmb-con" v-if="item.type == 3">
          <p class="ellipsis-1" @click="gotoDetail(item)">{{ item.relIndustryChain.info }}</p>
        </div>
      </div>
      <el-pagination
        background
        hide-on-single-page
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
        :current-page.sync="searchInfo.ipi"
      >
      </el-pagination>
    </div>
    <div class="no-data" v-else>
      <p>暂无数据！</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userInfo: {},
      searchInfo: {
        userId: "",
        ipi: 1,
        ips: 10,
        order: 2,
      },
      total: 0,
      noRead: 0,
      List: [],
    };
  },
  methods: {
    handleCurrentChange(val) {
      // console.log("val1", val);
      this.searchInfo.ipi = val;
      this.search();
    },
    handleReadAll() {
      if (this.noRead == 0) {
        this.$message({
          type: "warning",
          message: "所有消息均已读！",
        });
        return;
      }
      this.$confirm("您确定全部标为已读吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        this.$get(this.$Url.personal.messageReadAll, {
          userId: this.userInfo.id,
        }).then((res) => {
          this.search();
          this.$message({
            type: "success",
            message: "操作成功！",
          });
        });
      });
    },
    handleClick(item) {
      // 标为已读
      this.$get(this.$Url.personal.messageRead, {
        id: item.id,
      }).then((res) => {
        item.read = true;
      });
      if (item.type != 1) {
        this.gotoDetail(item);
      }
    },
    handleZX(item) {
      let url = this.$router.resolve({
        name: "ConsultDetail",
        query: {
          id: item.id,
        },
      });
      window.open(url.href, "_blank");
    },
    gotoDetail(item) {
      // console.log("item", item);
      if (item.type == 2) {
        // this.$Bus.$emit("progressBar", item);
      } else if (item.type == 3) {
        let url = this.$router.resolve({
          name: "ICDetail",
          query: {
            dictLabel: item.relIndustryChain.chainName,
          },
        });
        window.open(url.href, "_blank");
      }
    },
    search() {
      this.searchInfo.userId = this.userInfo.id;
      this.$get(this.$Url.personal.messageList, this.searchInfo).then((res) => {
        const data = res.data;
        this.total = data.total;
        this.noRead = data.notReadCount || 0;
        this.List = data.result;
      });
    },
  },
  created() {
    this.userInfo = JSON.parse(localStorage.getItem("homeUserInfo"));
    this.search();
  },
};
</script>
<style lang="scss" scoped>
.el-button--primary.is-plain:active,.el-button--primary.is-plain:focus{
  border-color: $mainColor;
  background-color: $mainColor;
}
.meaasge {
  .flex {
    justify-content: space-between;
    align-items: center;
    flex: none;
  }
  .m-tip {
    padding: 0 20px;
    margin-top: 10px;
    height: 40px;
    border-bottom: 2px solid $color19;
    .nav {
      line-height: 36px;
      padding: 0 10px;
      cursor: pointer;
      color: $mainColor;
      border-bottom: 3px solid $mainColor;
    }
    .total {
      margin-left: 20px;
      font-size: 12px;
      color: $color19;
    }
  }
  .m-main {
    margin: 20px 0;
    .mm-box {
      padding: 10px 0;
      & + .mm-box {
        border-top: 1px dashed $color19;
      }
    }

    .c {
      width: 15px;
    }
    .circle {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: $mainColor;
    }
    .flex-auto {
      cursor: pointer;
      margin: 0 10px;
    }
    .date {
      width: 160px;
      text-align: right;
    }
    .mmb-con {
      font-size: 12px;
      color: $color19;
      line-height: 30px;
      padding: 0 18px;
      p {
        cursor: pointer;
        width: 800px;
      }
      .scircle {
        display: inline-block;
        position: relative;
        top: -1px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: $color19;
        margin-right: 5px;
      }
    }
  }
}
</style>
